<template>
	<view class="">
		<fu-sticky bgColor="#FFFFFF">
			<fu-tabs :list="tabsMenu" @click="onClick"></fu-tabs>
		</fu-sticky>
		
		<fu-waterfall ref="waterfallRef" v-model="list" columnCount="2" :addTime="10" :column-gap="columnGap" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view class="waterfall-item" v-for="(item, index) in waterfallData.list1" :key="item.id">
						<image style="width: 100%;" :src="item.image" mode="widthFix"></image>
						<view class="waterfall-item__title">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<!-- 为了磨平部分平台的BUG，必须套一层view -->
				<view>
					<view class="waterfall-item" v-for="(item, index) in waterfallData.list2" :key="item.id">
						<image style="width: 100%;" :src="item.image" mode="widthFix"></image>
						<view class="waterfall-item__title">
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</template>
		</fu-waterfall>
	</view>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance, nextTick } from 'vue';
	import { onLoad, onHide, onReachBottom } from '@dcloudio/uni-app';
	
	// data数据
	const { $fu } = getCurrentInstance().appContext.config.globalProperties;
	const waterfallRef = ref();
	const tabsMenu = reactive([
		{name: '推荐'},
		{name: '电影'},
		{name: '科技'},
		{name: '动漫'}
	]);
	let list = reactive([]); // 瀑布流全部数据
	let waterfallData = reactive({
		list1: [], // 瀑布流第一列数据
		list2: [] // 瀑布流第二列数据
	})
	const columnGap = ref(10);
	
	// 生命周期
	onLoad(() => {
		init()
	});
	
	onHide(() => {
		waterfallRef.value.clear()
	});
	
	onReachBottom(async () => {
		const { data } = await getData();
		Object.assign(list, list.concat(data))
	});
	
	// methods方法
	const onClick = (e) => {
		init()
	};
	
	// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
	const changeList = (e) => {
		waterfallData[e.name].push(e.value);
	};
	
	const init = async () => {
		list.length = 0;
		waterfallData.list1 = [];
		waterfallData.list2 = [];
		const { data } = await getData();
		Object.assign(list, data)
	};
	
	// 模拟的后端数据
	const getData = () => {
		return new Promise((resolve)=>{
			const imgs = [
				{url: 'https://picsum.photos/100/110'},
				{url: 'https://picsum.photos/200/220'},
				{url: 'https://picsum.photos/300/340'},
				{url: 'https://picsum.photos/400/400'},
				{url: 'https://picsum.photos/500/510'},
				{url: 'https://picsum.photos/600/606'},
				{url: 'https://picsum.photos/310/422'},
				{url: 'https://picsum.photos/320/430'},
				{url: 'https://picsum.photos/330/424'},
				{url: 'https://picsum.photos/300/532'},
				{url: 'https://picsum.photos/350/400'},
				{url: 'https://picsum.photos/380/470'}
			];
			let list = [];
			const doFn = (i)=>{
				const randomIndex = Math.floor(Math.random() * 10);
				return {
					id: $fu.uuid(),
					image: `${imgs[randomIndex].url}?${$fu.uuid()}`,
					title: '欢迎使用FusionsUI，uni-app生态专用的UI框架',
				}
			};
			// 模拟异步
			setTimeout(() => {
				for (let i = 0; i < 20; i++) {
					list.push(doFn(i));
				}
				resolve({data:list});
			}, 200)
		})
	}
</script>

<style lang="scss">
	page {
		background-color: $bg-color-grey;
	}
	
	:deep(.fu-waterfall) {
		margin-top: 0 !important;
	}
	
	.waterfall-item {
		background-color: #FFFFFF;
		margin-top: 10px;
		overflow: hidden;
		border-radius: 6px;
		
		&__title {
			padding: 10px;
		}
	}
</style>